<template>
  <div class="content">
    <div class="head">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          shape="round"
        />
      </form>
      <div class="nav">
        <van-tabs
          swipe-threshold="4"
          line-height="0px"
          title-active-color="#78cccd"
        >
          <van-tab
            v-for="value in pronav"
            :title="value.tit"
            :key="value.tit"
            :to="value.path"
            :replace="true"
            route
          >
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
import { Search, Toast, Tabs, Tab } from "vant";

export default {
  data() {
    return {
      value: "",
      pronav: [
        {
          tit: "全部",
          path: "/all",
        },
        {
          tit: "文章·99+",
          path: "/atricle",
        },
        {
          tit: "讨论·99+",
          path: "/topic",
        },
        {
          tit: "产品·99+",
          path: "/pro",
        },
        {
          tit: "成分",
          path: "/element",
        },
      ],
    };
  },
  components: {
    VanSearch: Search,
    VanTabs: Tabs,
    VanTab: Tab,
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/var.less";
html,
body {
  height: 100%;
}
.content {
  height: 100%;
  .head {
    height: 100px;
    .nav {
      border-top: 1px solid #f1f1f1;
      border-bottom: 1px solid #f1f1f1;
      .van-tabs {
        /deep/ .van-tabs__wrap--scrollable .van-tab {
          padding: 0 @s-font;
          color: #929292;
        }
      }
    }
  }
}
</style>
